<template>
  <div class="navigation">
    <div class="nav-left" :class="{hasNext: aroundThis[0]}" v-if="aroundThis[0]&&aroundThis[0].title" @click="getAroundArticle(0)">
      上一篇：{{aroundThis[0].title}}
    </div>
    <div class="nav-left" :class="{hasNext: aroundThis[0]}" v-else>
      到头了
    </div>
    <!-- <div class="divide"></div> -->
    <div class="nav-right" :class="{hasNext: aroundThis[1]}" v-if="aroundThis[1]&&aroundThis[1].title" @click="getAroundArticle(1)">
      下一篇：{{aroundThis[1].title}}
    </div>
    <div class="nav-right" :class="{hasNext: aroundThis[1]}" v-else>
      到尾了
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'navigation',
  data() {
    return {
      aroundThis: []
    }
  },
  computed: {
    ...mapGetters([
      'articleList'
    ])
  },
  mounted() {
    setTimeout(() => {
      if (this.articleList.length !== 0) {
        let THIS_INDEX = 0
        const THIS_ARR = []
        this.articleList.forEach((item, index) => {
          if (item._id === this.$route.params.id) THIS_INDEX = index
        })
        if (THIS_INDEX === 0) {
          THIS_ARR.push('', this.articleList[THIS_INDEX + 1])
        } else if (THIS_INDEX === this.articleList.length - 1) {
          THIS_ARR.push(this.articleList[THIS_INDEX - 1], '')
        } else {
          THIS_ARR.push(this.articleList[THIS_INDEX - 1], this.articleList[THIS_INDEX + 1])
        }
        this.aroundThis = THIS_ARR
      } else {
        this.$store.dispatch('GetArticleAroundThis', this.$route.params.id).then((res) => {
          // console.log(res)
          this.aroundThis = res
        })
      }
    }, 100)
  },
  methods: {
    getAroundArticle(n) {
      // console.log(n)
      // this.$store.dispatch('GetThisArticle', this.aroundThis[n]._id)
      this.$router.push(`/article/${this.aroundThis[n]._id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.navigation {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
  border-radius: 3px;
  user-select: none;
  width: 100%;
  background-color: rgba(255,255,255,0.5);
  .nav-left, .nav-right {
    width: 50%;
    padding: 10px;
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hasNext {
    cursor: pointer;
    &:hover {
      background-color: rgba(250,230,250,0.8);
      box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 6px;
    }
  }
  .nav-left {
    text-align: left;
  }
  .nav-right {
    text-align: right;
  }
}
</style>
